<template>
<van-pull-refresh v-model="isLoading"  success-text="刷新成功"  @refresh="onRefresh">
 <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
    <ul>
      <li v-for="item in list" :key="item.id" @click="$router.push(`/detail/${item.id}`)">
        <div>
            <img :src="item.image" alt="">
        </div>
        <div>
            <p  class="van-multi-ellipsis--l2" >{{item.title}}</p>
            <p class="price">￥{{item.price}}</p>
        </div>
      </li>
     
     
  </ul>
  </van-list>
</van-pull-refresh>
</template>
<script setup>

import {ref} from 'vue'
// onMounted 生命周期函数
import {onMounted} from 'vue'
// 导入请求方法
import request from '@/utils/request'

const list = ref([])
// onMounted(() => {  
//   request.get('/list').then(res=>{
//     if(res.data.code==200){
      
//         list.value=res.data.data
//     }
//   })
//  })
const pagination = ref(1)
const loading =ref(false)
const finished =ref(false)
onMounted(()=>{
    request.get('/list',{
        params:{
            pagination:pagination.value,
            pageNum:10
        }
    }).then(res=>{
        if(res.data.code==200){
            list.value=res.data.data
        }
    })
})
//当你上拉加载更多时，触发load事件
const onload =()=>{
    //先展示loading
    //请求数据
    //loadding关闭
    //页码+1
    //判断是否还有数据  
    loading.value=true
    request.get('/list',{
        params:{
            pagination:pagination.value,
            pageNum:10
        }
    }).then(res=>{
        if(res.data.code==200)
        {   
            //数组拼接
             list.value=list.value.concat(res.data.data) 
             //list.value[...list.value,...res.data.data]
        }
        //loadding关闭
        loading.value=false
        //页码+1
        pagination.value++
        //判断是否还有数据 所以数据完成后，finished设置为true
        if(res.data.data.length>=res.data.total){
            finished.value=true
        }
    })
}

const isLoading = ref(false) // 下拉刷新
const onRefresh = () => {
     setTimeout(() => {
      
       
         isLoading.value = false;
      }, 1000);
}
</script>

<style lang="scss" scoped>
ul{
    column-count: 2;
    column-gap: 10px;
    li{
        /*避免在元素内部换行 */
        break-inside: avoid;
        img{
            width: 100%;
        }
        .price{
            color: #f00;
        }
    }
}
</style>